//添加弹框jq
$('#myModal').on('shown.bs.modal', function () {
    $('#myInput').focus()
});
//修改弹框的jq
$('#myModal2').on('shown.bs.modal', function () {
    $('#myInput').focus()
});
//删除弹框的jq
let target = null;
$('#myModal3').on('shown.bs.modal', function () {
    $('#myInput').focus();

});
//查看班级的详细信息弹框jq
$('#myModal4').on('shown.bs.modal', function () {
    $('#myInput').focus()
});
//升班的详细信息弹框jq
$('#myModal5').on('shown.bs.modal', function () {
    $('#myInput').focus()
});
//添加框的表单验证
var oclassname=$('.addclassname');
oclassname.blur(function () {
    var b=/^[\u4e00-\u9fa5A-Za-z]{2,6}$/;
    var c=oclassname.val();
    if (b.test(c)){
        $('.iconcolor').removeClass('red2').html('<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>').addClass('green2');
    }else{
        $('.iconcolor').removeClass('green2').html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>').addClass('red2');
    }
});
//修改框的表单验证
$('.classname2').blur(function () {
    var b=/^[\u4e00-\u9fa5A-Za-z]{2,6}$/;
    var c=$('.classname2').val();
    if (b.test(c)){
        $('.iconcolor-2').removeClass('red2').html('<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>').addClass('green2');
    }else{
        $('.iconcolor-2').removeClass('green2').html('<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>').addClass('red2');
    }
});
//数组对象
var arr=[
    {
        check:'<input type="checkbox">',
        classname:'蓝天班',
        classtype:'实体班',
        classlevel:'大班',
        classsize:20,
        masterteacher:'王老师',
        deputyteacher:'刘老师',
        conservationteacher:'周老师',
        goon:'<a href="javascript:;" data-toggle="modal" data-target="#myModal5">\n'+
        '<span  class="glyphicon glyphicon-arrow-up modifysize" aria-hidden="true"></span>\n'+
        '</a>',
        modify:'<a href="javascript:;" data-toggle="modal" data-target="#myModal2" class="modify">\n' +
        '<span  class="iconfont icon-web-icon- modifysize" aria-hidden="true"></span>\n' +
        '</a>',
        deleteall:'<a href="javascript:;" data-toggle="modal" data-target="#myModal3">\n' +
        '<span  class="iconfont icon-shanchu modifysize" aria-hidden="true"></span>\n' +
        '</a>',
        Remarks:'这是蓝天班'
    },
    {
        check:'<input type="checkbox">',
        classname:'黑土班',
        classtype:'流动班',
        classlevel:'中班',
        classsize:20,
        masterteacher:'刘老师',
        deputyteacher:'王老师',
        conservationteacher:'刘老师',
        goon:'<a href="javascript:;" data-toggle="modal" data-target="#myModal5">\n'+
        '<span  class="glyphicon glyphicon-arrow-up modifysize" aria-hidden="true"></span>\n'+
        '</a>',
        modify:'<a href="javascript:;" data-toggle="modal" data-target="#myModal2" class="modify">\n' +
        '<span  class="iconfont icon-web-icon- modifysize " aria-hidden="true"></span>\n' +
        '</a>',
        deleteall:'<a href="javascript:;" data-toggle="modal" data-target="#myModal3">\n' +
        '<span  class="iconfont icon-shanchu modifysize" aria-hidden="true"></span>\n' +
        '</a>',
        Remarks:'这是黑土班'
    },
    {
        check:'<input type="checkbox">',
        classname:'旅行班',
        classtype:'新力班',
        classlevel:'小班',
        classsize:15,
        masterteacher:'修老师',
        deputyteacher:'谭老师',
        conservationteacher:'盛老师',
        goon:'<a href="javascript:;" data-toggle="modal" data-target="#myModal5">\n'+
        '<span  class="glyphicon glyphicon-arrow-up modifysize" aria-hidden="true"></span>\n'+
        '</a>',
        modify:'<a href="javascript:;" data-toggle="modal" data-target="#myModal2" class="modify">\n' +
        '<span  class="iconfont icon-web-icon- modifysize" aria-hidden="true"></span>\n' +
        '</a>',
        deleteall:'<a href="javascript:;" data-toggle="modal" data-target="#myModal3">\n' +
        '<span  class="iconfont icon-shanchu modifysize" aria-hidden="true"></span>\n' +
        '</a>',
        Remarks:'这是旅行班'
    },
    {
        check:'<input type="checkbox">',
        classname:'superclass',
        classtype:'双语班',
        classlevel:'大班',
        classsize:24,
        masterteacher:'Ben',
        deputyteacher:'Mina',
        conservationteacher:'王老师',
        goon:'<a href="javascript:;" data-toggle="modal" data-target="#myModal5">\n'+
        '<span  class="glyphicon glyphicon-arrow-up modifysize" aria-hidden="true"></span>\n'+
        '</a>',
        modify:'<a href="javascript:;" data-toggle="modal" data-target="#myModal2" class="modify">\n' +
        '<span  class="iconfont icon-web-icon- modifysize" aria-hidden="true"></span>\n' +
        '</a>',
        deleteall:'<a href="javascript:;" data-toggle="modal" data-target="#myModal3">\n' +
        '<span  class="iconfont icon-shanchu modifysize" aria-hidden="true"></span>\n' +
        '</a>',
        Remarks:'这是superclass'
    },
    {
        check:'<input type="checkbox">',
        classname:'小草班',
        classtype:'新力班',
        classlevel:'小班',
        classsize:10,
        masterteacher:'刘老师',
        deputyteacher:'王老师',
        conservationteacher:'蒋老师',
        goon:'<a href="javascript:;" data-toggle="modal" data-target="#myModal5">\n'+
        '<span  class="glyphicon glyphicon-arrow-up modifysize" aria-hidden="true"></span>\n'+
        '</a>',
        modify:'<a href="javascript:;" data-toggle="modal" data-target="#myModal2" class="modify">\n' +
        '<span  class="iconfont icon-web-icon- modifysize" aria-hidden="true"></span>\n' +
        '</a>',
        deleteall:'<a href="javascript:;" data-toggle="modal" data-target="#myModal3">\n' +
        '<span  class="iconfont icon-shanchu modifysize" aria-hidden="true"></span>\n' +
        '</a>',
        Remarks:'这是小草班'
    },
    {
        check:'<input type="checkbox">',
        classname:'牛牛班',
        classtype:'实体班',
        classlevel:'大班',
        classsize:25,
        masterteacher:'王老师',
        deputyteacher:'魏老师',
        conservationteacher:'修老师',
        goon:'<a href="javascript:;" data-toggle="modal" data-target="#myModal5">\n'+
        '<span  class="glyphicon glyphicon-arrow-up modifysize" aria-hidden="true"></span>\n'+
        '</a>',
        modify:'<a href="javascript:;" data-toggle="modal" data-target="#myModal2" class="modify">\n' +
        '<span  class="iconfont icon-web-icon- modifysize" aria-hidden="true"></span>\n' +
        '</a>',
        deleteall:'<a href="javascript:;" data-toggle="modal" data-target="#myModal3">\n' +
        '<span  class="iconfont icon-shanchu modifysize" aria-hidden="true"></span>\n' +
        '</a>',
        Remarks:'这是牛牛班'
    },
    {
        check:'<input type="checkbox">',
        classname:'星星班',
        classtype:'活力班',
        classlevel:'中班',
        classsize:20,
        masterteacher:'王老师',
        deputyteacher:'胡老师',
        conservationteacher:'刘老师',
        goon:'<a href="javascript:;" data-toggle="modal" data-target="#myModal5">\n'+
        '<span  class="glyphicon glyphicon-arrow-up modifysize" aria-hidden="true"></span>\n'+
        '</a>',
        modify:'<a href="javascript:;" data-toggle="modal" data-target="#myModal2" class="modify">\n' +
        '<span  class="iconfont icon-web-icon- modifysize" aria-hidden="true"></span>\n' +
        '</a>',
        deleteall:'<a href="javascript:;"  data-toggle="modal" data-target="#myModal3">\n' +
        '<span  class="iconfont icon-shanchu modifysize" aria-hidden="true"></span>\n' +
        '</a>',
        Remarks:'这是星星班'
    }
];
//所有json对象添加到表格
let ser = ['蓝天班','黑土班','旅行班','superclass','小草班','牛牛班','星星班'];
let s = [];
var ot=document.querySelector('tbody');
arr.forEach(function (v,i) {
    var otr=document.createElement('tr');
    otr.innerHTML=`
        <td>${v.check}</td>
        <td data-toggle="modal" data-target="#myModal4" class="see">${v.classname}</td>
        <td data-toggle="modal" data-target="#myModal4" class="see">${v.classtype}</td>
        <td data-toggle="modal" data-target="#myModal4" class="see">${v.classlevel}</td>
        <td data-toggle="modal" data-target="#myModal4" class="see">${v.classsize}</td>
        <td data-toggle="modal" data-target="#myModal4" class="see">${v.masterteacher}</td>
        <td data-toggle="modal" data-target="#myModal4" class="see">${v.deputyteacher}</td>
        <td data-toggle="modal" data-target="#myModal4" class="see">${v.conservationteacher}</td>
        <td>${v.goon}</td>
        <td>${v.modify}</td>
        <td>${v.deleteall}</td>
        `;
    ot.appendChild(otr);
    s.push(otr);
});
//删除功能
$('.deletedata').click(function () {
    for(let i=0; i<s.length;i++){
        if(s[i] === target){
            arr.pop(i);
            target.remove();
        }
    }
});
$('tbody').on('click','span',function (e) {
    target = e.originalEvent.path[3];
});
//增加班级
$('.adddata').click(function () {
    arr.push({
        check:'<input type="checkbox">',
        classname:oclassname.val(),
        classtype:$('.addclasstype1 option:selected').val(),
        classlevel:$('.addclasstype2 option:selected').val(),
        classsize:20,
        masterteacher:$('.addmasterteacher option:selected').val(),
        deputyteacher:$('.adddeputyteacher option:selected').val(),
        conservationteacher:$('.addconservationteacher option:selected').val(),
        goon:'<a href="javascript:;" data-toggle="modal" data-target="#myModal5">\n'+
        '<span  class="glyphicon glyphicon-arrow-up modifysize" aria-hidden="true"></span>\n'+
        '</a>',
        modify:'<a href="javascript:;" data-toggle="modal" data-target="#myModal2" class="modify">\n' +
        '<span  class="iconfont icon-web-icon- modifysize" aria-hidden="true"></span>\n' +
        '</a>',
        deleteall:'<a href="javascript:;"  data-toggle="modal" data-target="#myModal3">\n' +
        '<span  class="iconfont icon-shanchu modifysize" aria-hidden="true"></span>\n' +
        '</a>',
        Remarks:$('addRemarks').val()
    });
    ser.push(oclassname.val());
    var otr=document.createElement('tr');
    arr.forEach(function (v,i) {
            otr.innerHTML=`
        <td>${v.check}</td>
        <td data-toggle="modal" data-target="#myModal4" class="see">${v.classname}</td>
        <td data-toggle="modal" data-target="#myModal4" class="see">${v.classtype}</td>
        <td data-toggle="modal" data-target="#myModal4" class="see">${v.classlevel}</td>
        <td data-toggle="modal" data-target="#myModal4" class="see">${v.classsize}</td>
        <td data-toggle="modal" data-target="#myModal4" class="see">${v.masterteacher}</td>
        <td data-toggle="modal" data-target="#myModal4" class="see">${v.deputyteacher}</td>
        <td data-toggle="modal" data-target="#myModal4" class="see">${v.conservationteacher}</td>
        <td>${v.goon}</td>
        <td>${v.modify}</td>
        <td>${v.deleteall}</td>
        `;
            ot.appendChild(otr);
            s.push(otr);
        }
    );

    $('.see').click(function (e) {
        let i = e.originalEvent.path[1].children[1].innerText;
        /*console.log(i)*/
        /*console.log(ser.indexOf(i));
        console.log(ser);*/
        console.log(ser.indexOf(i));
        $('.seeclassname').text(arr[ser.indexOf(i)].classname);
        $('.seeclasstype').text(arr[ser.indexOf(i)].classtype);
        $('.seeclassclasslevel').text(arr[ser.indexOf(i)].classlevel);
        $('.seemasterteacher').text(arr[ser.indexOf(i)].masterteacher);
        $('.seedeputyteacher').text(arr[ser.indexOf(i)].deputyteacher);
        $('.seeconservationteacher').text(arr[ser.indexOf(i)].conservationteacher);
        $('.seeRemarks').text(arr[ser.indexOf(i)].Remarks);

    });
    $('.modify').click(function (e) {
            // console.log(arr[0].classname);
            let i = e.originalEvent.path[3].children[1].innerText;
            console.log(i);
            $('.modifyclassname').val(arr[ser.indexOf(i)].classname);
            $('.modifytype1').val(arr[ser.indexOf(i)].classtype);
            $('.modifytype2').val(arr[ser.indexOf(i)].classlevel);
            $('.modifymasterteacher').val(arr[ser.indexOf(i)].masterteacher);
            $('.modifyeputyteacher').val(arr[ser.indexOf(i)].deputyteacher);
            $('.modifyconservationteacher').val(arr[ser.indexOf(i)].conservationteacher);
            $('.modifyRemarks').val(arr[ser.indexOf(i)].Remarks);
        }
    );

});

//详细信息查看
$('.see').click(function (e) {
    let i = e.originalEvent.path[1].children[1].innerText;
    /*console.log(i)*/
    /*console.log(ser.indexOf(i));
    console.log(ser);*/
    console.log(ser.indexOf(i));
    $('.seeclassname').text(arr[ser.indexOf(i)].classname);
    $('.seeclasstype').text(arr[ser.indexOf(i)].classtype);
    $('.seeclassclasslevel').text(arr[ser.indexOf(i)].classlevel);
    $('.seemasterteacher').text(arr[ser.indexOf(i)].masterteacher);
    $('.seedeputyteacher').text(arr[ser.indexOf(i)].deputyteacher);
    $('.seeconservationteacher').text(arr[ser.indexOf(i)].conservationteacher);
    $('.seeRemarks').text(arr[ser.indexOf(i)].Remarks);

});
//修改
var omodify=$('.modify');
omodify.click(function (e) {
    // console.log(arr[0].classname);
    let i = e.originalEvent.path[3].children[1].innerText;
    $('.modifyclassname').val(arr[ser.indexOf(i)].classname);
    $('.modifytype1').val(arr[ser.indexOf(i)].classtype);
    $('.modifytype2').val(arr[ser.indexOf(i)].classlevel);
    $('.modifymasterteacher').val(arr[ser.indexOf(i)].masterteacher);
    $('.modifyeputyteacher').val(arr[ser.indexOf(i)].deputyteacher);
    $('.modifyconservationteacher').val(arr[ser.indexOf(i)].conservationteacher);
    $('.modifyRemarks').val(arr[ser.indexOf(i)].Remarks);
    }
);
$('.modifyPreservation').click(function () {
    // let i = e.originalEvent.path[2].children[1];
    console.log(target);
    let value = [];
    document.querySelectorAll('.change').forEach(function (i) {
        console.log(i.value);
        value.push(i.value)
    });
    for(let m=0, i=1;i<4;i++, m++){
        target.children[i].innerText = value[m]
    }
    for(let m=3, i=5;i<8;i++, m++){
        target.children[i].innerText = value[m]
    }
    // $('.form-control').value()
    // arr[ser.indexOf(i)].classname($('.modifyclassname').val);
});
//input框点击全选
$('.checkall').click(function () {
    // $('input').checked();
    // $('.checkall').attr("value","false");
    if ($('.checkall')[0].checked === true){
        $('input').attr("checked", true)
    }else{
        $('input').attr("checked", false)
    }
});

//搜索
$('.query').click(function () {
   var searchvalue=$('.search') .val();
   if (searchvalue.trim()){
       $('tbody tr').each(function () {
           let ok = false;
           // console.log(this)
           $(this).children().each(function () {
               // console.log(this);
               if($(this).text()===searchvalue){
                   ok = true
               }
           });
           if(ok){
               $(this).css('display','');
               $(this).css('color','red')

           }else{
               $(this).css('display','none');
               $(this).css('color','')
           }
       })
   }else{
       $('tbody tr').each(function () {
           $(this).css('display','');
           $(this).css('color','')
       })
   }

});